<template>
    <uni-popup ref="popup" border-radius="10rpx" style="z-index:9999">
		<view class="content ">
			<view class="content-info d-flex d-r a-center">
				<view class="user-img">
				    <image :src="props.userInfo?.photo||'/static/head.jpg'" class="touxiang"></image>
				</view>
				<view class="user-name">
				    <text class="name">{{props?.userInfo?.nickName}}</text>
				    <text class="id">ID:{{props?.userInfo?.id}}</text>
				</view>
			</view>
			<view class="erweima">
			    <image class="qr" :src="props.qrcode" mode="" />
			</view>
			<text class="open">打开轻盈扫一扫，加我为好友。</text>
			<tm-button class="btn_main" :width="594" round="5" :shadow="-1" :linear-color="['#64F1C5', '#29DBA3']"
			    linear="left" :fontSize="32" fontColor="#ffffff" @tap="saveCode" label="保存图片至相册"></tm-button>
			<image src="/static/userinfo/guanbi.png" class="guanbi" @click="onCloseProps"></image>
		</view>
	</uni-popup>
</template>
<script setup lang="ts">
import {
    ref,
    reactive,
    watch,
    nextTick,
    computed,
    onMounted,
    handleError,
    defineProps,
    defineEmits
} from "vue";


import { pathToBase64,base64ToPath } from 'image-tools'
import {
    showLoading,
    closeLoading,
    saveImg,
} from "@/utils/utils";


const props: any = defineProps({
    userInfo:{
        type:Object,
        default(){
            return {}
        }
    },
    codePopup: Boolean,
    qrcode:String,
});
let saveLoading = false;
const saveCode = async ()=>{
    if(saveLoading){
        return;
    }
    saveLoading = true;
    showLoading();




    const path = await base64ToPath(props.qrcode).catch(()=>{
        closeLoading();
        saveLoading = false;
        uni.showToast({
            icon: "none",
            title: "保存图片失败",
        });
    });

    const result = await saveImg(path).catch(()=>{
        closeLoading();
        saveLoading = false;
        uni.showToast({
            icon: "none",
            title: "保存图片失败",
        });
    });


    if(result){
        closeLoading();
        uni.showToast({
            icon: "none",
            title: "图片已保存至相册",
        });
        setTimeout(()=>{
            closeLoading();
            saveLoading = false;
        },300)
    }
}
const popup = ref()
const open = () => {
	popup.value.open()
}
const onCloseProps = () => {
    popup.value.close()
}

defineExpose({
  open
});
</script>
<style lang="scss">
.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}
.content{
	width: 654rpx;
	height: 940rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx 30rpx 0 30rpx;
	.content-info{
		.user-img {
			width: 120rpx;
			height: 120rpx;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
			border: 6rpx solid #FFFFFF;
			border-radius: 10rpx;
			border-radius: 50%;
			overflow: hidden;
	
			.touxiang {
				display: block;
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}
		}
		.user-name {
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    margin-left:5rpx;
		
		    .name {
		        font-size: 32rpx;
		        color: #333333;
		    }
		
		    .id {
		        font-size: 24rpx;
		        font-family: PingFangSC-Regular, PingFang SC;
		        font-weight: 400;
		        color: #999999;
		    }
		}
	}
	.erweima {
	    width: 582rpx;
	    height: 582rpx;
	    background: #F5F5F5;
	    margin: 0 auto;
	    .qr{
	        width:582rpx;
	        height:582rpx;
	    }
	
	}
	.open {
		width: 594rpx;
	    height: 86rpx;
	    line-height: 86rpx;
	    font-size: 28rpx;
	    font-family: PingFangSC-Regular, PingFang SC;
	    font-weight: 400;
	    color: #999999;
	    text-align: center;
	}
	
	.btn_main {
		font-weight: 600;
	    height: 80rpx;
	    line-height: 80rpx;
	}
	.guanbi {
	    width: 52rpx;
	    height: 52rpx;
	    position: absolute;
	    left: 301rpx;
	    bottom: -120rpx;
	}
}
</style>    